<template>
    <div class="history-page">
        <div class="history-list-context">
            <history-list-item v-for="item in 10"/>
        </div>
        <div class="history-detail-context">
            <div class="small-gallery">
                <history-gallery/>
            </div>
            <div class="img-context">
                <img src="~@/assets/test.jpg" alt="图片">
            </div>
            <div class="history-info-table">
                <el-divider><i class="el-icon-position"/></el-divider>
                <table>
                    <tr>
                        <td>
                            时间
                        </td>
                        <td id="time">
                            {{attackInfo.time}}
                        </td>
                    </tr>
                    <tr>
                        <td>金币</td>
                        <td id="gold">{{attackInfo.resource.gold}}</td>
                    </tr>
                    <tr>
                        <td>圣水</td>
                        <td id="water">{{attackInfo.resource.water}}</td>
                    </tr>
                    <tr>
                        <td>重油</td>
                        <td id="oil">{{attackInfo.resource.oil}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
    import HistoryListItem from "@/components/history/HistoryListItem";
    import HistoryGallery from "@/pages/history/gallery/HistoryGallery";

    export default {
        name: "HistoryPage",
        components: {HistoryGallery, HistoryListItem},
        data() {
            return {
                attackInfo: {
                    time: (() => {
                        let temp = new Date().toISOString().split('T').join(' ');
                        return temp.substr(0, temp.length - 5);
                    })(),
                    resource: {
                        gold: 12345,
                        water: 435323,
                        oil: 400
                    }
                },
                images: {
                    src: '~@/assets/test.jpg',
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "~@/styles/global.scss";

    .history-page {
        display: flex;

        .history-list-context {
            width: 35%;
            height: 100vh;
            padding: 10px;
            background-color: #f4f4f4;
            box-shadow: 0 2px 5px #e7e7e7;
            overflow-y: auto;

            @media all and (max-width: 500px) {
                display: none;
            }
        }

        .history-detail-context {
            position: relative;
            margin: 5px auto;
            width: 98%;

            .small-gallery {
                @media screen and (min-width: 500px){
                    display: none;
                }
            }

            h2 {
                border-left: 3px solid $green;
                padding: 10px 20px;
                font-weight: 300;
                color: #45434c;
            }

            .img-context {
                width: 100%;
                margin: auto;
                overflow: hidden;

                img {
                    width: 100%;
                }
            }

            .history-info-table {
                width: 90%;
                margin: 20px auto;


                table {
                    margin-top: 20px;
                    width: 100%;

                    td:nth-child(2) {
                        text-align: right;
                    }

                    #time, #gold, #water, #oil {
                        font-size: 18px;
                        font-weight: bold;
                    }

                    #time {
                        color: gray;
                    }

                    #gold {
                        color: #fed20d;
                    }

                    #water {
                        color: #af2fb3;
                    }

                    #oil {
                        color: #312030;
                    }
                }
            }
        }
    }

</style>
